<template>
    <v-dialog v-model="inputValue" scrollable max-width="500px">
      <v-card>
        <v-skeleton-loader
            type="article"
            v-if="loading"
            key="loading" 
          >
        </v-skeleton-loader>
        <v-card-text 
          v-else-if="item" 
          key="card-text"
          style="max-height: calc(100vh - 300px);" 
          class="pa-5"
        >
          <h3>{{item.title}}</h3>
          <p class="mt-5" v-html="item.content"></p>
          <p class="mt-5">{{item.created_at}}</p>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            dark
            rounded
            class="mr-5"
            @click="inputValue = false"
          >
            {{$t('base.close')}}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>    
</template>

<script>
  export default {
    components: {
    },
    props: {
      value:{default: false},
      notification:{default: null},
      viewAction:{default: null},
      vularId: {default: 'view-notification-dialog'},
    },
    data: () => ({
      loading:false,
      item:null,
    }),

    computed:{
      inputValue: {
        get:function() {
          return this.value;
        },
        set:function(val) {
          this.$emit('input', val);
        },
      },
    },

    created(){
      window.$bus.$on('dispatchModel', this.onDispatchModel)
      window.$bus.$on('ActionError', this.onActionError)
    },

    destroyed() {
      window.$bus.$off('dispatchModel', this.onDispatchModel)
      window.$bus.$off('ActionError', this.onActionError)
    },

    methods: {
      onDispatchModel(vularId, model){
        if(vularId == this.vularId){
          this.item = model
          this.loading = false
        }
      },

      onActionError(vularId){
        if(vularId == this.vularId){
         this.loading = false
        }
      },
    },

    watch:{
      inputValue(val){
        if(this.viewAction && val){
          this.loading = true
          window.$bus.$emit('VularAction', this.viewAction, this.vularId, this.notification)
        }
      } 
    }    
  }
</script>
